<template>
    <div>
        <div class="title_box">
          <div class="iconfont icon-left" @click="$router.push('/shoppingCar')"></div>
          <div class="title">确认订单</div>
          <div></div>
        </div>
        <router-link tag="div" class="site" to="/AddressList">
          <div class="text">
            <div v-if="show">请填写收货地址</div>
            <div class="address" v-else>
              <p>
                <span>{{address.name}}</span>
                <span>{{address.tel}}</span>
              </p>
              <p>{{address.address}}</p>
            </div>
          </div>
          <div class="iconfont icon-you"></div>
        </router-link>
        <div class="list">
            <ul>
                <li v-for="(item, index) in checkGoods" :key="index">
                  <div class="left">
                    <img :src="item.goodsLogo" alt="" />
                  </div>
                  <div class="right">
                    <div class="goods_name">{{ item.goodsName }}</div>
                    <div class="price_num">
                      <div class="price">￥{{ item.goodsPrice }}</div>
                      <div class="num">
                        <span @click="reduce(index)">-</span>
                        <span>{{ item.num }}</span>
                        <span @click="addNum(index)">+</span>
                      </div>
                    </div>
                  </div>
                </li>
            </ul>
        </div>

        <div class="settlement-box">
          <div class="occupy"></div>
          <div class="settlement">
            <div class="left">
              总计:￥{{total}}
            </div>
            <div class="right">
              <div class="total">共{{checkGoods.length}}件商品</div>
              <span class="btn" @click="submitOrder">提交订单</span>
            </div>
          </div>
        </div>

    </div>
</template>

<script>
import { Dialog,Toast } from 'vant';
export default {
    data() {
        return {
            checkGoods:[], // 下单商品
            total:0, // 总价
            address:{}, // 地址
            show: true,
        }
    },
    
    methods:{
        // 减少商品数量
        reduce(index) {
          if(this.checkGoods[index].num > 1){
            this.checkGoods[index].num -= 1;
          }else{
            Dialog.confirm({
              message: '确定从购物车中删除？',
            })
            .then(() => {
                this.$store.commit("delcheck",index)
            })
          }
          this.totalFun()
        },
        // 添加商品数量
        addNum(index) {
          this.checkGoods[index].num += 1;
          this.totalFun()
        },
        // 总价
        totalFun(){
          let goodsList = this.checkGoods;
          if(goodsList.length){
            let data = goodsList.reduce((total,item)=>{
              total = total + item.num * item.goodsPrice
              return total;
            },0)
            this.total = data
          }else if(goodsList.length == 0){
            this.total = "0.00"
          }
        },
        // 收货地址
        selectAddress(){
          if(this.$route.query.id){
            this.show = false
          }else{
            this.show = true
          }
        },
        // 提交订单
        submitOrder(){
          if(this.show){
            Toast.fail('请选择地址');  
            return
          }
          this.$router.push("/pay")
          // id、名称、价格、商品图片
          let checkGoods  = this.$store.getters.getData.checkGoods;
          if(checkGoods.length > 0){
            checkGoods.forEach(element => {
              let data = {
                  id:element.id,
                  goodsName:element.goodsName,
                  goodsPrice:element.goodsPrice,
                  goodsLogo:element.goodsLogo,
                  num: element.num,
                  status: 1
              }
              this.$store.commit("PaidGoodsFun",data)
            });
          }else{
            this.$store.commit("PaidGoodsFun",this.$store.getters.getData.checkGoods)
          }
          
        }
    },
    created(){
      if(this.$store.getters.getData.checkGoods.length > 0){
        this.checkGoods = this.$store.getters.getData.checkGoods;
      }else{
        this.checkGoods.push(this.$store.getters.getData.checkGoods)
      }
        console.log()
        this.totalFun()
        this.address = this.$route.query
        this.selectAddress()
    }
}
</script>

<style lang="less" scoped>
  .settlement-box {
  .occupy {
    height: 50px;
    padding: 10px;
  }
  .settlement {
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 60px;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    // padding: 10px;
    border-top: 2px solid #ebe4e4;
    background: #fff;
    .left {
        margin-left: 10px;
        font-size: 20px;
    }
    .right {
      display: flex;
      .total {
        margin-right: 10px;
        font-size: 18px;
      }
      .btn {
        background: #ff5777;
        color: #fff;
        padding: 0px 35px;
        // border-radius: 30px;
        font-size: 20px;
      }
    }
  }
}

    .site{
        font-size: 18px;
        padding: 10px 20px;
        background: #fff;
        display: flex;
        justify-content: space-between; 
        position: relative;
        .address{
          p{
            span{
              margin-right: 10px;
            }
          }
        }
        .iconfont{
          position: absolute;
          right: 10px;
          top: 50%;
          margin-top: -8px;
        }
    }
    .list {
      ul {
        li {
          overflow: hidden;
          margin: 10px;
          padding: 10px;
          background: #fff;
          display: flex;
          .left {
            width: 160px;
            height: 160px;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            width: 62%;
            margin-left: 10px;
            display: flex;
            flex-flow: row wrap;
            align-content: space-between;
            .goods_name {
              font-size: 18px;
            }
            .price_num {
              width: 100%;
              display: flex;
              justify-content: space-between;
              font-size: 16px;
              margin: 10px 0;
              .price {
                font-size: 26px;
              }
              .num {
                height: 34px;
                line-height: 34px;
                background: #f7f7f7;
                border-radius: 20px;
                span {
                  padding: 6px 12px;
                  &:nth-child(2) {
                    font-size: 22px;
                    font-weight: bolder;
                  }
                  &:nth-child(odd) {
                    color: #ababab;
                    font-size: 30px;
                  }
                }
              }
            }
          }
        }
      }
    }
    .title_box {
      height: 47px;
      line-height: 47px;
      padding: 7px 0px;
      text-align: center;
      background: #fff;
      border-bottom: 6px dashed #E8E8E8;
      display: flex;
      justify-content: space-around;
      div:nth-child(odd){
          flex: 1;
          font-size: 18px;
      }
      .title {
        flex: 6;
        font-size: 20px;
      }
    }
</style>